<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小作业-印象笔记</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <!-- 头部部分 -->
    <header>
        <div class="head">
            <div class="yinxiang"></div>
            <div class="nav">
                <ul>
                    <li id="chanpin"><a href="#">产品 &or;</a></li>
                    <li><a href="#">探索印象 &or;</a></li>
                    <li><a href="#">企业版 &or;</a></li>
                    <li><a href="#">模板库&nbsp;</a></li>
                </ul>
            </div>
            <div class="navsearch">
                <input type="search" name="" id="search" placeholder="搜索...">
                <div id="searchpic"></div>
            </div>
            <input type="button" value="注册/登录" class="navenroll">
            <input type="button" value="下载" class="downloan">
        </div>
        <section id="section">
            <div class="chanpin">
                <div class="chanpin1">
                    <h2>印象笔记</h2>
                    <ul>
                        <li>
                            <img src="images/功能介绍.png" alt="">
                            <div>
                                <h2>功能介绍</h2>
                                <p>印象笔记功能概览</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/免费下载.png" alt="">
                            <div>
                                <h2>免费下载</h2>
                                <p>支持所有设备，随时随地同步</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/会员权益.png" alt="">
                            <div>
                                <h2>会员权益</h2>
                                <p>选择符合需求的帐户类型</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/剪藏.png" alt="">
                            <div>
                                <h2>印象笔记·剪藏</h2>
                                <p>一键保存网页</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="chanpin2">
                    <h2>更多产品</h2>
                    <ul>
                        <li>
                            <img src="images/扫描宝.png" alt="">
                            <div>
                                <h2>扫描宝</h2>
                                <p>手机里的扫描仪</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/印象时间.png" alt="">
                            <div>
                                <h2>印象时间</h2>
                                <p>专注时间管理，高效规划日程</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/印象录音机.png" alt="">
                            <div>
                                <h2>印象录音机</h2>
                                <p>实时音频转写精确识别</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/墨笔.png" alt="">
                            <div>
                                <h2>墨笔</h2>
                                <p>高效标注图片，轻松添加注释</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="chanpin3">
                    <h2></h2>
                    <ul>
                        <li>
                            <img src="images/印象轻记.png" alt="">
                            <div>
                                <h2>印象轻记</h2>
                                <p>轻松记录，随时保存</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/印象图记.png" alt="">
                            <div>
                                <h2>印象图记</h2>
                                <p>在线思维导图工具</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/小程序.png" alt="">
                            <div>
                                <h2>小程序</h2>
                                <p>基于微信生态的轻量级小程序</p>
                            </div>
                        </li>
                        <a href="#">了解更多 ></a>
                    </ul>
                </div>
            </div>
        </section>
    </header>

    <!-- 大图片 -->
    <div class="bigpic" id="bigpic">
        <div class="headpic" id="headpic">
            <div id="prev">&lt;</div>
            <div id="next">&gt;</div>
        </div>
    </div>
    <!-- 注册部分 -->
    <div class="register">
        <div class="methon">
            <input type="button" value="微信注册">
            <input type="button" value="手机号注册">
        </div>
        <div class="divide w">
            <div>
                <hr>
            </div>
            <span>或</span>
            <div>
                <hr>
            </div>
        </div>
        <div class="shuru">
            <input type="email" name="" id="" placeholder="邮箱">
            <input type="password" name="" id="" placeholder="密码">
            <input type="button" value="免费注册">
        </div>
    </div>
    <!-- 主要功能与内容 -->
    <div class="content w">
        <div class="content-head">
            <h1>使用印象笔记，管理你的第二大脑</h1>
            <p>随时随地获取、整理、分享笔记，让灵感时刻与你同行</p>
        </div>
        <ul class="content-use w">
            <li class="tongbu">
                <img src="images/同步.png" alt="">
                <h2>多端同步</h2>
                <h2></h2>
                <p>随时随地查看和备份信息</p>
            </li>
            <li class="shoucang">
                <img src="images/收藏.png" alt="">
                <h2>内容收藏</h2>
                <p>一键储存高价值网页和文章</p>
            </li>
            <li class="guanli">
                <img src="images/管理.png" alt="">
                <h2>资料管理</h2>
                <p>全面支持Office、PDF等格式</p>
            </li>
            <li class="gongxiang">
                <img src="images/共享.png" alt="">
                <h2>信息共享</h2>
                <p> 快捷共享笔记，高效完成协作</p>
            </li>
        </ul>
    </div>
    <!-- 功能展示 -->
    <div class="usage">
        <ul class="usage-head">
            <li><img src="images/超级笔记.png" alt="">超级笔记</li>
            <li><img src="images/剪藏.png" alt="">剪藏</li>
            <li><img src="images/清单.png" alt="">清单</li>
            <li><img src="images/思维导图.png" alt="">思维导图</li>
            <li><img src="images/模板.png" alt="">模板</li>
            <li><img src="images/ocr扫描.png" alt="">ocr扫描</li>
            <li><img src="images/更多.png" alt="">更多</li>
        </ul>
        <div class="usage-body">
            <img src="images/usage1.png" alt="">
            <h1>模块化体验：自由拖拽编辑</h1>
        </div>
        <ul class="yuandian">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 优点部分 -->
    <div class="merit">
        <div class="merit-head">
            <h1>让生活更有序，让工作更高效，让协作更便捷</h1>
            <p>帮助个人及团队保存高价值信息、整理知识、有效协作，让印象笔记成为你的「第二大脑」！</p>
        </div>
        <div class="merit-box">
            <div class="mbox1">
                <img src="images/m1.png" alt="">
                <h1>轻松收集一切</h1>
                <p>无论是点滴灵感、待办清单、或者会议记录、项目资料、高价值文章，你可以用印象笔记保存一切。笔记会自动同步到所有设备：手机、电脑、平板，多终端一键同步！</p>
                <a href="#">了解详情 > 免费下载 ></a>
            </div>
            <div class="mbox2">
                <img src="images/m2.png" alt="">
                <h1>有序整理信息</h1>
                <p>从文字、图片、录音、清单到网页、思维导图、文档和附件，支持丰富的文件格式，帮你妥帖保存。搭配智能搜索功能，文字、图片甚至附件中的文字皆可迅速锁定。</p>
                <a href="#">了解详情 > 免费下载 ></a>
            </div>
            <div class="mbox3">
                <img src="images/m3.png" alt="">
                <h1>快速协作共享</h1>
                <p>无需跳出应用即可一键分享笔记，轻松管理项目，共享资料，实时讨论，高效达成协作目标。</p>
                <a href="#">了解详情 > 免费下载 ></a>
            </div>
        </div>
    </div>
    <!-- 受欢迎部分 -->
    <div class="popular w">
        <h1>已为全球2.5亿用户提供服务</h1>
        <p>帮助数亿用户，高效管理工作和生活</p>
        <div class="popular-content">
            <img src="images/引号.png" alt="" class="yinhao">
            <p>用了7年，从一位抗拒医学专业的稚嫩毕业生，成长为一名牙科主任，他在编号为100的笔记本里，存放了458条临床笔记。</p>
            <div class="yonghu">
                <img src="images/yayi.png" alt="">
                <h2>赵瑜敏</h2>
                <p>牙医</p>
            </div>
        </div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 其他盒子1 -->
    <div class="box1">
        <img src="images/box1.png" alt="">
        <div class="box1-content">
            <h1>使用印象笔记，高效记录一切</h1>
            <p>支持所有设备，随时随地保持高效</p>
            <a href="#"><span>免费下载</span></a>
        </div>
    </div>
    <!-- 其他盒子2 -->
    <div class="box2">
        <h1>20000+企业客户的信赖之选</h1>
        <p>覆盖法律、教育、金融、互联网、科研…多个行业</p>
        <div class="box-pic">
            <img src="images/1-宽带资本.png" alt="">
            <img src="images/2-ZhenFund.png" alt="">
            <img src="images/3-东方航空.png" alt="">
            <img src="images/4-清华.png" alt="">
            <img src="images/5-HBR.png" alt="">
        </div>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 其他盒子3 -->
    <div class="box3">
        <img src="images/box3.png" alt="">
        <div class="box3-content">
            <h1>印象团队，<br>助力团队高效协作，永久免费</h1>
            <p>汇聚团队智慧，便捷共享信息，打造强大团队知识库</p>
            <a href="#"><span>立即使用</span></a>
        </div>
    </div>
    <!-- 尾部部分 -->
    <footer>
        <span>
            <img src="images/foot.png" alt="">
            <hr>
        </span>
        <div class="guanyuwm">
            <ul>
                <li>
                    <dl>
                        <dt><a href="#">产品</a></dt>
                        <dd><a href="#">印象笔记</a></dd>
                        <dd><a href="#">会员权益</a></dd>
                        <dd><a href="#">下载</a></dd>
                    </dl>
                    <dl>
                        <dt><a href="#">更多产品</a></dt>
                        <dd><a href="#">扫描宝</a></dd>
                        <dd><a href="#">印象时间</a></dd>
                        <dd><a href="#">印象录音机</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt><a href="#">探索印象</a></dt>
                        <dd><a href="#">最新动态</a></dd>
                        <dd><a href="#">用户故事</a></dd>
                        <dd><a href="#">使用技巧</a></dd>
                        <dd><a href="#">视频教程</a></dd>
                        <dd><a href="#">帮助支持</a></dd>
                        <dd><a href="#">印象识堂</a></dd>
                        <dd><a href="#">智能硬件</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt><a href="#">印象TEAMS</a></dt>
                        <dd><a href="#">功能亮点</a></dd>
                        <dd><a href="#">立即使用</a></dd>
                    </dl>
                    <dl>
                        <dt><a href="#">印象社区</a></dt>
                        <dd><a href="#">认证咨询顾问</a></dd>
                        <dd><a href="#">印象大使</a></dd>
                        <dd><a href="#">开发者</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt><a href="#">关于我们</a></dt>
                        <dd><a href="#">公司愿景</a></dd>
                        <dd><a href="#">印象生态</a></dd>
                        <dd><a href="#">新闻动态</a></dd>
                        <dd><a href="#">加入我们</a></dd>
                        <dd><a href="#">联系我们</a></dd>
                    </dl>
                </li>
            </ul>
            <div class="tubiao">
                <ul>
                    <li class="tudiao1"><img src="images/weixin.png" alt=""></li>
                    <li class="tudiao2"><img src="images/weibo.png" alt=""></li>
                    <li class="tudiao3"><img src="images/bilibili.png" alt=""></li>
                    <li class="tudiao4"><img src="images/xiaohongshu.png" alt=""></li>
                </ul>
            </div>
        </div>
    </footer>
</body>
<script src="script.js"></script>
</html>